        <!DOCTYPE html>
        <html>
        <head>
                <meta charset="utf-8">
        <title>CanvasDraw class / box2d_html Library / Dart Documentation</title>
        <link rel="stylesheet" type="text/css"
            href="../styles.css">
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800" rel="stylesheet" type="text/css">
        <link rel="shortcut icon" href="../favicon.ico">
        
        </head>
        <body data-library="box2d_html" data-type="CanvasDraw">
        <div class="page">
        <div class="header">
          <a href="../index.html"><div class="logo"></div></a>
          <a href="../index.html">Dart Documentation</a>
         &rsaquo; <a href="../box2d_html.html">box2d_html</a> &rsaquo; <a href="../box2d_html/CanvasDraw.html">CanvasDraw</a>        <div id="search-box">
          <input type="search" name="q" id="q" autocomplete="off"
              class="search-input" placeholder="Search API">
        </div>
        
      </div>
      <div class="drop-down" id="drop-down"></div>
      
        <div class="nav">
        
</div>
<div class="content">
        <h2><strong>CanvasDraw</strong>
          class
        </h2>
        
<button id="show-inherited" class="show-inherited">Hide inherited</button>
<div class="doc">
<p>Draws using the given canvas context for debugging purposes.
WARNING: This implementation modifies its arguments (e.g. Vectors) to save
garbage.</p>
<pre class="source">
class CanvasDraw extends DebugDraw {
  /** The canvas rendering context with which to draw. */
  CanvasRenderingContext2D ctx;

  CanvasDraw(IViewportTransform viewport, this.ctx) : super(viewport) {
    assert (null !== viewport &amp;&amp; null !== ctx);
  }

  /**
   * Draw a closed polygon provided in CCW order. WARNING: This mutates
   * [vertices].
   */
  void drawPolygon(List&lt;Vector&gt; vertices, int vertexCount, Color3 color) {
    _pathPolygon(vertices, vertexCount, color);
    ctx.stroke();
  }

  /**
   * Draw a solid closed polygon provided in CCW order. WARNING: This mutates
   * [vertices].
   */
  void drawSolidPolygon(List&lt;Vector&gt; vertices, int vertexCount, Color3 color) {
    _pathPolygon(vertices, vertexCount, color);
    ctx.fill();
  }

  void _pathPolygon(List&lt;Vector&gt; vertices, int vertexCount, Color3 color) {
    // Set the color and convert to screen coordinates.
    _color = color;
    // TODO(gregbglw): Do a single ctx transform rather than convert all of
    // these vectors.
    for (int i = 0; i &lt; vertexCount; ++i)
      getWorldToScreenToOut(vertices[i], vertices[i]);

    ctx.beginPath();
    ctx.moveTo(vertices[0].x, vertices[0].y);

    // Draw lines to all of the remaining points.
    for (int i = 1; i &lt; vertexCount; ++i)
      ctx.lineTo(vertices[i].x, vertices[i].y);

    // Draw a line back to the starting point.
    ctx.lineTo(vertices[0].x, vertices[0].y);

    // Close the drawn polygon ready for fill/stroke
    ctx.closePath();
  }

  /** Draw a line segment. WARNING: This mutates [p1] and [p2]. */
  void drawSegment(Vector p1, Vector p2, Color3 color) {
    _color = color;
    getWorldToScreenToOut(p1, p1);
    getWorldToScreenToOut(p2, p2);

    ctx.beginPath();
    ctx.moveTo(p1.x, p1.y);
    ctx.lineTo(p2.x, p2.y);
    ctx.closePath();
    ctx.stroke();
  }

  /** Draw a circle. WARNING: This mutates [center]. */
  void drawCircle(Vector center, num radius, Color3 color, [Vector axis]) {
    radius *= viewportTransform.scale;
    _pathCircle(center, radius, color);
    ctx.stroke();
  }

  /** Draw a solid circle. WARNING: This mutates [center]. */
  void drawSolidCircle(Vector center, num radius, Color3 color, [Vector axis]) {
    radius *= viewportTransform.scale;
    drawPoint(center, radius, color);
  }

  /**
   * Draws the given point with the given *unscaled* radius, in the given color.
   * WARNING: This mutates [center].
   */
  void drawPoint(Vector point, num radiusOnScreen, Color3 color) {
    _pathCircle(point, radiusOnScreen, color);
    ctx.fill();
  }

  void _pathCircle(Vector center, num radius, Color3 color) {
    _color = color;
    getWorldToScreenToOut(center, center);

    ctx.beginPath();
    ctx.arc(center.x, center.y, radius, 0, MathBox.TWO_PI, true);
    ctx.closePath();
  }

  /**
   * Draw a transform. Choose your own length scale. WARNING: This mutates
   * [xf.position].
   */
  void drawTransform(Transform xf, Color3 color) {
    drawCircle(xf.position, 0.1, color);
    // TODO(rupertk): Draw rotation representation (drawCircle axis parameter?)
  }

  /** Draw a string. */
  void drawString(num x, num y, String s, Color3 color) {
    _color = color;
    ctx.strokeText(s, x, y);
  }

  /** Sets the rendering context stroke and fill color to [color]. */
  void set _color(Color3 color) {
    ctx.setStrokeColorRgb(color.x, color.y, color.z, 0.9);
    ctx.setFillColorRgb(color.x, color.y, color.z, 0.8);
  }
}
</pre>
</div>
<h3>Extends</h3>
<p>
<span class="type-box"><span class="icon-class"></span><a href="../box2d_html/DebugDraw.html">DebugDraw</a></span>&nbsp;&gt;&nbsp;<span class="type-box"><span class="icon-class"></span><strong>CanvasDraw</strong></span></p>
<div>
<h3>Constructors</h3>
<div class="method"><h4 id="CanvasDraw">
<button class="show-code">Code</button>
new <strong>CanvasDraw</strong>(<a href="../box2d_html/IViewportTransform.html">IViewportTransform</a> viewport, CanvasRenderingContext2D ctx) <a class="anchor-link" href="#CanvasDraw"
              title="Permalink to CanvasDraw.CanvasDraw">#</a></h4>
<div class="doc">
<pre class="source">
CanvasDraw(IViewportTransform viewport, this.ctx) : super(viewport) {
  assert (null !== viewport &amp;&amp; null !== ctx);
}
</pre>
</div>
</div>
</div>
<div>
<h3>Properties</h3>
<div class="field"><h4 id="ctx">
<button class="show-code">Code</button>
CanvasRenderingContext2D         <strong>ctx</strong> <a class="anchor-link"
            href="#ctx"
            title="Permalink to CanvasDraw.ctx">#</a>
        </h4>
        <div class="doc">
<p>The canvas rendering context with which to draw.</p>
<pre class="source">
CanvasRenderingContext2D ctx;
</pre>
</div>
</div>
<div class="field inherited"><h4 id="flags">
<button class="show-code">Code</button>
int         <strong>flags</strong> <a class="anchor-link"
            href="#flags"
            title="Permalink to CanvasDraw.flags">#</a>
        </h4>
        <div class="inherited-from">inherited from <a href="../box2d_html/DebugDraw.html">DebugDraw</a> </div><div class="doc">
<pre class="source">
int flags;
</pre>
</div>
</div>
<div class="field inherited"><h4 id="runtimeType">
<button class="show-code">Code</button>
final Type         <strong>runtimeType</strong> <a class="anchor-link"
            href="#runtimeType"
            title="Permalink to CanvasDraw.runtimeType">#</a>
        </h4>
        <div class="inherited-from">inherited from Object </div><div class="doc">
<p>A representation of the runtime type of the object.</p>
<pre class="source">
external Type get runtimeType;
</pre>
</div>
</div>
<div class="field inherited"><h4 id="viewportTransform">
<button class="show-code">Code</button>
<a href="../box2d_html/IViewportTransform.html">IViewportTransform</a>         <strong>viewportTransform</strong> <a class="anchor-link"
            href="#viewportTransform"
            title="Permalink to CanvasDraw.viewportTransform">#</a>
        </h4>
        <div class="inherited-from">inherited from <a href="../box2d_html/DebugDraw.html">DebugDraw</a> </div><div class="doc">
<pre class="source">
IViewportTransform viewportTransform;
</pre>
</div>
</div>
</div>
<div>
<h3>Operators</h3>
<div class="method inherited"><h4 id="==">
<button class="show-code">Code</button>
bool <strong>operator ==</strong>(other) <a class="anchor-link" href="#=="
              title="Permalink to CanvasDraw.operator ==">#</a></h4>
<div class="inherited-from">inherited from Object </div><div class="doc">
<p>The equality operator.</p>
<p>The default behavior for all <code>Object</code>s is to return true if and
only if <code>this</code> and 
<span class="param">other</span> are the same object.</p>
<p>If a subclass overrides the equality operator it should override
the <code>hashCode</code> method as well to maintain consistency.</p>
<pre class="source">
bool operator ==(other) =&gt; identical(this, other);
</pre>
</div>
</div>
</div>
<div>
<h3>Methods</h3>
<div class="method inherited"><h4 id="appendFlags">
<button class="show-code">Code</button>
void <strong>appendFlags</strong>(int value) <a class="anchor-link" href="#appendFlags"
              title="Permalink to CanvasDraw.appendFlags">#</a></h4>
<div class="inherited-from">inherited from <a href="../box2d_html/DebugDraw.html">DebugDraw</a> </div><div class="doc">
<pre class="source">
void appendFlags(int value) { flags |= value; }
</pre>
</div>
</div>
<div class="method"><h4 id="CanvasDraw">
<button class="show-code">Code</button>
new <strong>CanvasDraw</strong>(<a href="../box2d_html/IViewportTransform.html">IViewportTransform</a> viewport, CanvasRenderingContext2D ctx) <a class="anchor-link" href="#CanvasDraw"
              title="Permalink to CanvasDraw.CanvasDraw">#</a></h4>
<div class="doc">
<pre class="source">
CanvasDraw(IViewportTransform viewport, this.ctx) : super(viewport) {
  assert (null !== viewport &amp;&amp; null !== ctx);
}
</pre>
</div>
</div>
<div class="method inherited"><h4 id="clearFlags">
<button class="show-code">Code</button>
void <strong>clearFlags</strong>(int value) <a class="anchor-link" href="#clearFlags"
              title="Permalink to CanvasDraw.clearFlags">#</a></h4>
<div class="inherited-from">inherited from <a href="../box2d_html/DebugDraw.html">DebugDraw</a> </div><div class="doc">
<pre class="source">
void clearFlags(int value) { flags &amp;= ~value; }
</pre>
</div>
</div>
<div class="method inherited"><h4 id="DebugDraw">
<button class="show-code">Code</button>
new <strong>DebugDraw</strong>(<a href="../box2d_html/IViewportTransform.html">IViewportTransform</a> viewport) <a class="anchor-link" href="#DebugDraw"
              title="Permalink to CanvasDraw.DebugDraw">#</a></h4>
<div class="inherited-from">inherited from <a href="../box2d_html/DebugDraw.html">DebugDraw</a> </div><div class="doc">
<pre class="source">
DebugDraw(IViewportTransform viewport)
    : flags = e_shapeBit,
      viewportTransform = viewport;
</pre>
</div>
</div>
<div class="method"><h4 id="drawCircle">
<button class="show-code">Code</button>
void <strong>drawCircle</strong>(<a href="../box2d_html/Vector.html">Vector</a> center, num radius, <a href="../box2d_html/Color3.html">Color3</a> color, [<a href="../box2d_html/Vector.html">Vector</a> axis]) <a class="anchor-link" href="#drawCircle"
              title="Permalink to CanvasDraw.drawCircle">#</a></h4>
<div class="doc">
<p>Draw a circle. WARNING: This mutates 
<span class="param">center</span>.</p>
<pre class="source">
void drawCircle(Vector center, num radius, Color3 color, [Vector axis]) {
  radius *= viewportTransform.scale;
  _pathCircle(center, radius, color);
  ctx.stroke();
}
</pre>
</div>
</div>
<div class="method"><h4 id="drawPoint">
<button class="show-code">Code</button>
void <strong>drawPoint</strong>(<a href="../box2d_html/Vector.html">Vector</a> point, num radiusOnScreen, <a href="../box2d_html/Color3.html">Color3</a> color) <a class="anchor-link" href="#drawPoint"
              title="Permalink to CanvasDraw.drawPoint">#</a></h4>
<div class="doc">
<p>Draws the given point with the given <em>unscaled</em> radius, in the given color.
WARNING: This mutates <code>center</code>.</p>
<pre class="source">
void drawPoint(Vector point, num radiusOnScreen, Color3 color) {
  _pathCircle(point, radiusOnScreen, color);
  ctx.fill();
}
</pre>
</div>
</div>
<div class="method"><h4 id="drawPolygon">
<button class="show-code">Code</button>
void <strong>drawPolygon</strong>(List&lt;<a href="../box2d_html/Vector.html">Vector</a>&gt; vertices, int vertexCount, <a href="../box2d_html/Color3.html">Color3</a> color) <a class="anchor-link" href="#drawPolygon"
              title="Permalink to CanvasDraw.drawPolygon">#</a></h4>
<div class="doc">
<p>Draw a closed polygon provided in CCW order. WARNING: This mutates

<span class="param">vertices</span>.</p>
<pre class="source">
void drawPolygon(List&lt;Vector&gt; vertices, int vertexCount, Color3 color) {
  _pathPolygon(vertices, vertexCount, color);
  ctx.stroke();
}
</pre>
</div>
</div>
<div class="method"><h4 id="drawSegment">
<button class="show-code">Code</button>
void <strong>drawSegment</strong>(<a href="../box2d_html/Vector.html">Vector</a> p1, <a href="../box2d_html/Vector.html">Vector</a> p2, <a href="../box2d_html/Color3.html">Color3</a> color) <a class="anchor-link" href="#drawSegment"
              title="Permalink to CanvasDraw.drawSegment">#</a></h4>
<div class="doc">
<p>Draw a line segment. WARNING: This mutates 
<span class="param">p1</span> and 
<span class="param">p2</span>.</p>
<pre class="source">
void drawSegment(Vector p1, Vector p2, Color3 color) {
  _color = color;
  getWorldToScreenToOut(p1, p1);
  getWorldToScreenToOut(p2, p2);

  ctx.beginPath();
  ctx.moveTo(p1.x, p1.y);
  ctx.lineTo(p2.x, p2.y);
  ctx.closePath();
  ctx.stroke();
}
</pre>
</div>
</div>
<div class="method"><h4 id="drawSolidCircle">
<button class="show-code">Code</button>
void <strong>drawSolidCircle</strong>(<a href="../box2d_html/Vector.html">Vector</a> center, num radius, <a href="../box2d_html/Color3.html">Color3</a> color, [<a href="../box2d_html/Vector.html">Vector</a> axis]) <a class="anchor-link" href="#drawSolidCircle"
              title="Permalink to CanvasDraw.drawSolidCircle">#</a></h4>
<div class="doc">
<p>Draw a solid circle. WARNING: This mutates 
<span class="param">center</span>.</p>
<pre class="source">
void drawSolidCircle(Vector center, num radius, Color3 color, [Vector axis]) {
  radius *= viewportTransform.scale;
  drawPoint(center, radius, color);
}
</pre>
</div>
</div>
<div class="method"><h4 id="drawSolidPolygon">
<button class="show-code">Code</button>
void <strong>drawSolidPolygon</strong>(List&lt;<a href="../box2d_html/Vector.html">Vector</a>&gt; vertices, int vertexCount, <a href="../box2d_html/Color3.html">Color3</a> color) <a class="anchor-link" href="#drawSolidPolygon"
              title="Permalink to CanvasDraw.drawSolidPolygon">#</a></h4>
<div class="doc">
<p>Draw a solid closed polygon provided in CCW order. WARNING: This mutates

<span class="param">vertices</span>.</p>
<pre class="source">
void drawSolidPolygon(List&lt;Vector&gt; vertices, int vertexCount, Color3 color) {
  _pathPolygon(vertices, vertexCount, color);
  ctx.fill();
}
</pre>
</div>
</div>
<div class="method"><h4 id="drawString">
<button class="show-code">Code</button>
void <strong>drawString</strong>(num x, num y, String s, <a href="../box2d_html/Color3.html">Color3</a> color) <a class="anchor-link" href="#drawString"
              title="Permalink to CanvasDraw.drawString">#</a></h4>
<div class="doc">
<p>Draw a string.</p>
<pre class="source">
void drawString(num x, num y, String s, Color3 color) {
  _color = color;
  ctx.strokeText(s, x, y);
}
</pre>
</div>
</div>
<div class="method"><h4 id="drawTransform">
<button class="show-code">Code</button>
void <strong>drawTransform</strong>(<a href="../box2d_html/Transform.html">Transform</a> xf, <a href="../box2d_html/Color3.html">Color3</a> color) <a class="anchor-link" href="#drawTransform"
              title="Permalink to CanvasDraw.drawTransform">#</a></h4>
<div class="doc">
<p>Draw a transform. Choose your own length scale. WARNING: This mutates
<code>xf.position</code>.</p>
<pre class="source">
void drawTransform(Transform xf, Color3 color) {
  drawCircle(xf.position, 0.1, color);
  // TODO(rupertk): Draw rotation representation (drawCircle axis parameter?)
}
</pre>
</div>
</div>
<div class="method inherited"><h4 id="getScreenToWorldToOut">
<button class="show-code">Code</button>
void <strong>getScreenToWorldToOut</strong>(<a href="../box2d_html/Vector.html">Vector</a> argScreen, <a href="../box2d_html/Vector.html">Vector</a> argWorld) <a class="anchor-link" href="#getScreenToWorldToOut"
              title="Permalink to CanvasDraw.getScreenToWorldToOut">#</a></h4>
<div class="inherited-from">inherited from <a href="../box2d_html/DebugDraw.html">DebugDraw</a> </div><div class="doc">
<p>Screen coordinates are specified in argScreen. These coordinates are
converted to World coordinates and placed in the argWorld return vector.</p>
<pre class="source">
void getScreenToWorldToOut(Vector argScreen, Vector argWorld) {
  viewportTransform.getScreenToWorld(argScreen, argWorld);
}
</pre>
</div>
</div>
<div class="method inherited"><h4 id="getWorldToScreenToOut">
<button class="show-code">Code</button>
void <strong>getWorldToScreenToOut</strong>(<a href="../box2d_html/Vector.html">Vector</a> argWorld, <a href="../box2d_html/Vector.html">Vector</a> argScreen) <a class="anchor-link" href="#getWorldToScreenToOut"
              title="Permalink to CanvasDraw.getWorldToScreenToOut">#</a></h4>
<div class="inherited-from">inherited from <a href="../box2d_html/DebugDraw.html">DebugDraw</a> </div><div class="doc">
<p>World coordinates are specified in argWorld. These coordinates are
converted to screen coordinates and placed in the argScreen return vector.</p>
<pre class="source">
void getWorldToScreenToOut(Vector argWorld, Vector argScreen) {
  viewportTransform.getWorldToScreen(argWorld, argScreen);
}
</pre>
</div>
</div>
<div class="method inherited"><h4 id="hashCode">
<button class="show-code">Code</button>
int <strong>hashCode</strong>() <a class="anchor-link" href="#hashCode"
              title="Permalink to CanvasDraw.hashCode">#</a></h4>
<div class="inherited-from">inherited from Object </div><div class="doc">
<p>Get a hash code for this object.</p>
<p>All objects have hash codes. Hash codes are guaranteed to be the
same for objects that are equal when compared using the equality
operator <code>==</code>. Other than that there are no guarantees about
the hash codes. They will not be consistent between runs and
there are no distribution guarantees.</p>
<p>If a subclass overrides <code>hashCode</code> it should override the
equality operator as well to maintain consistency.</p>
<pre class="source">
external int hashCode();
</pre>
</div>
</div>
<div class="method inherited"><h4 id="noSuchMethod">
<button class="show-code">Code</button>
<strong>noSuchMethod</strong>(String name, List args) <a class="anchor-link" href="#noSuchMethod"
              title="Permalink to CanvasDraw.noSuchMethod">#</a></h4>
<div class="inherited-from">inherited from Object </div><div class="doc">
<p><code>noSuchMethod</code> is invoked when users invoke a non-existant method
on an object. The name of the method and the arguments of the
invocation are passed to <code>noSuchMethod</code>. If <code>noSuchMethod</code>
returns a value, that value becomes the result of the original
invocation.</p>
<p>The default behavior of <code>noSuchMethod</code> is to throw a
<code>noSuchMethodError</code>.</p>
<pre class="source">
external Dynamic noSuchMethod(String name, List args);
</pre>
</div>
</div>
<div class="method inherited"><h4 id="Object">
<button class="show-code">Code</button>
const <strong>Object</strong>() <a class="anchor-link" href="#Object"
              title="Permalink to CanvasDraw.Object">#</a></h4>
<div class="inherited-from">inherited from Object </div><div class="doc">
<p>Creates a new <code>Object</code> instance.</p>
<p><code>Object</code> instances have no meaningful state, and are only useful
through their identity. An <code>Object</code> instance is equal to itself
only.</p>
<pre class="source">
const Object();
</pre>
</div>
</div>
<div class="method inherited"><h4 id="setCamera">
<button class="show-code">Code</button>
void <strong>setCamera</strong>(num x, num y, num scale) <a class="anchor-link" href="#setCamera"
              title="Permalink to CanvasDraw.setCamera">#</a></h4>
<div class="inherited-from">inherited from <a href="../box2d_html/DebugDraw.html">DebugDraw</a> </div><div class="doc">
<p>Sets the center of the viewport to the given x and y values and the
viewport scale to the given scale.</p>
<pre class="source">
void setCamera(num x, num y, num scale) {
  viewportTransform.setCamera(x,y,scale);
}
</pre>
</div>
</div>
<div class="method inherited"><h4 id="toString">
<button class="show-code">Code</button>
String <strong>toString</strong>() <a class="anchor-link" href="#toString"
              title="Permalink to CanvasDraw.toString">#</a></h4>
<div class="inherited-from">inherited from Object </div><div class="doc">
<p>Returns a string representation of this object.</p>
<pre class="source">
external String toString();
</pre>
</div>
</div>
</div>
        </div>
        <div class="clear"></div>
        </div>
        
        <div class="footer">
          
        </div>
        <script async src="../client-live-nav.js"></script>
        </body></html>
        
